<template>
  <div class="container">
    <table>
      <ChooseDog
        v-for="(item, index) in dogList"
        :key="index"
        :dog="item"
        @dogType="dogType"
      />
    </table>
    <div>
      <div>您喜欢的狗如下:</div>
      <ul>
        <li v-for="(item, index) in likeDogs" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import ChooseDog from '@/components/ChooseDog.vue'
export default {
  components: {
    ChooseDog,
  },
  data() {
    return {
      dogList: [
        {
          name: '金毛',
          url: 'http://inews.gtimg.com/newsapp_bt/0/14930327851/641',
        },
        {
          name: '阿拉斯加',
          url: 'https://img0.baidu.com/it/u=2032328249,3139060098&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679418000&t=9810657cb1c90e6ab2c2cbb56b12249b',
        },
        {
          name: '拉布拉多',
          url: 'http://inews.gtimg.com/newsapp_bt/0/14930327948/641',
        },
        {
          name: '德牧',
          url: 'http://inews.gtimg.com/newsapp_bt/0/14930327757/641',
        },
        {
          name: '二哈',
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e087b27-fa68-43de-8b1d-6374c8d59d26%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681909627&t=171610730a0e77a7c32136761a23d482',
        },
        {
          name: '萨摩耶',
          url: 'http://inews.gtimg.com/newsapp_bt/0/14930328773/641',
        },
      ],
      likeDogs: [],
    }
  },
  methods: {
    dogType(val) {
      this.likeDogs.push(val)
    },
  },
}
</script>

<style>
.container {
  display: flex;
}
table {
  display: flex;
  width: 910px;
  flex-wrap: wrap;
}
</style>
